<template>
	<view>
		<view class="mainView">
			<view class="now">
				当前昵称：
				<view class="nickName">{{nowNickName}}</view>
			</view>
			<input class="input" placeholder="请输入需要修改的昵称" maxlength=12 v-model="changeNickName" focus />
			<button class="button" plain @click="onClickButton" type="primary" >确定</button>
		</view>
		<view class="safeView"></view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				nowNickName:'',
				changeNickName:''
			}
		},
		onLoad(){
			const that=this;
			wx.showLoading({
			  title:'loading...',
			  mask:true
			});
			wx.request({
				url:that.myConfig.hostUrl+'/api/nickName.php',
				data:{
					openId:that.myConfig.openId
				},
				success:function(res){
					if(res.data.errCode==200){
						wx.hideLoading();
						that.nowNickName=res.data.nickName;
					}else{
						wx.hideLoading();
						uni.showToast({
							title:'请检查网络后重试',
							icon:'none',
							duration:2000
						});
					}
				},
				fail:function(){
					uni.showToast({
						title:'请检查网络后重试',
						icon:'none',
						duration:2000
					});
				}
			});
		},
		methods:{
			onClickButton(){
				const that=this;
				if(that.changeNickName=='')
					return ;
				wx.request({
					url:that.myConfig.hostUrl+'/api/changeNickName.php',
					method:'POST',
					data:{
						openId:that.myConfig.openId,
						nickName:that.changeNickName
					},
					success:function(res){
						wx.navigateBack({});
						wx.showToast({
							title:'修改成功',
							duration:1200
						});
					},
					fail:function(){
						uni.showToast({
							title:'请检查网络后重试',
							icon:'none',
							duration:2000
						});
					}
				});
			}
		}
	}
</script>

<style scoped>
	.mainView{
		margin: 25rpx;
	}
	.now{
		font-size: 35rpx;
		display: flex;
		align-items: center;
	}
	.nickName{
		background-color: #eaeaea;
		padding: 15rpx;
		border-radius: 15rpx;
		color: #FB9126;
	}
	.input{
		width: calc(100%-40rpx);
		margin-top: 20rpx;
		height: 80rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		border-radius: 30rpx;
		background-color: #eaeaea;
	}
	.button{
		margin-top: 20rpx;
	}
</style>
